<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title> Image Guess </title>
  <style>
	body { margin: 20px; }
	img { margin: 20px; }
  </style>
  <script>
	window.onload = function() {
		var images = document.getElementsByTagName("img");
		for (var i = 0; i < images.length; i++) {
			images[i].onmouseover = showAnswer;
			images[i].onmouseout = reblur;
		}
	};
	function showAnswer(eventObj) {
		var image = eventObj.target;
		var name = image.id;
		name = name + ".jpg";
		image.src = name;
	}

	function reblur(eventObj) {
		var image = eventObj.target;
		var name = image.id;
		name = name + "blur.jpg";
		image.src = name;
	}
  </script>
</head>
<body>
	<img id="zero" src="zeroblur.jpg">
	<img id="one" src="oneblur.jpg">
	<img id="two" src="twoblur.jpg">
	<img id="three" src="threeblur.jpg">
	<img id="four" src="fourblur.jpg">
	<img id="five" src="fiveblur.jpg">
</body>
</html>
